export default {
  /**
    button: {
      text: '请选择',
      size: 'small',
      type: 'primary'
    },
    data: {
      id: 1,
      name: '张三'
    },
    list: [
      {
        name: 'manage1',
        text: '管理1',
        readonly: true,
        // 不在Dropdown中显示
        button: true,
        hide: true,
        type: 'primary',
        callback: (item) => {
          console.log(item)
        }
      },
      {
        name: 'manage2',
        text: '管理2',
        disabled: true,
        divided: true,
        callback: (item) => {
          console.log(item)
        }
      }
    ]
  */
  props: {
    button: {
      type: Object,
      default: () => {}
    },
    data: {
      type: Object,
      default: () => {}
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    list: {
      deep: true,
      handler(newValue) {
        this.init()
      }
    }
  },
  data() {
    return {
      buttonList: [],
      dropdownList: []
    };
  },
  beforeMount() {
    this.init()
  },
  methods: {
    init() {
      this.buttonList = []
      this.dropdownList = []
      let buttonList = this.buttonList
      let dropdownList = this.dropdownList
      this.list.forEach(item => {
        if (item.button) {
          buttonList.push(item)
        } else if (!item.hide) {
          dropdownList.push(item)
        }
      })

      if (dropdownList.length == 1) {
        buttonList.push(dropdownList[0])
      }
    },
    toggleItem(name) {
      let list = this.dropdownList,
      item = null
      for (let i = 0; i < list.length; i++) {
        item = list[i]
        if (item.name === name) {
          !item.disabled && item.callback && item.callback(name)
          break
        }
      }
    },
    getDropdownStyle() {
      let style = {}
      if (this.buttonList.length) {
        style['margin-left'] = '10px'
      }

      return style
    }
  }
}